<template>

    <div class="has-padding-sm">

        <div class="heading outline">
            <i class="icon-cogs avatar"></i>
            <div class="title">
                <nav class="nav">
                    <a href="javascript:;" :class="getSelectedClass(baseInformation.tab)"
                       @click="selectTab(baseInformation.tab)">{{baseInformation.label}}</a>
                    <a href="javascript:;" :class="getSelectedClass(profile.tab)"
                       @click="selectTab(profile.tab)"
                       v-show="!isNewRecord">{{profile.label}}</a>
                </nav>
            </div>

            <nav class="nav right">
                <a href="javascript:history.go(-1)" class="btn rounded grass"><i class="icon icon-arrow-left"></i>{{this.$t('back')}}</a>
            </nav>
        </div>
        <div class="clearfix"></div>

        <keep-alive>
            <component
                    :is="currentTab"
                    :commonData="commonData"
                    @afterSave="afterSave"
                    @afterFind="afterFind"
            ></component>
        </keep-alive>

    </div>

</template>
<!--
暂且固定两个tab。不做插槽功能

// this.attributesets = [
//     {name: 'id', label: 'id', inputType: 'text', component: 'XInput', required: true, value: 'aaa', placeholder: '', errors: ''},
//     {name: 'mobile', label: 'mobile', inputType: 'number', component: 'XInput', value: 1, placeholder: '', errors: ''},
//     {name: 'items', label: 'items', component: 'XSelect', items: {a: 'Aa', b: 'Bb'}, errors: ''},
//     {name: 'textarea', label: 'textarea', component: 'XTextarea', value: '....', errors: ''},
//     {name: 'checkbox', label: 'checkbox', component: 'XCheckBox', value: '....', errors: ''},
// ];
-->
<script>
    import BaseInfoFormTab from "@/components/FormTab/BaseInfoFormTab";
    import ProfileFormTab from "@/components/FormTab/ProfileFormTab";

    export default {
        components: {BaseInfoFormTab, ProfileFormTab},
        data() {
            return {
                // base info props

                commonData: {
                    columns: 3,
                    primaryKeys: {id: ''},
                    baseInfoAction: '/sys/rbac/admin/default/edit',

                    // profile props
                    profilePrimaryKeys: {id: ''},
                    profileAction: '/sys/rbac/admin/profile/edit',
                },


                // model
                isNewRecord: true,
                // inputItems: [],

                // tabs
                currentTab: 'BaseInfoFormTab',
                baseInformation: {
                    tab: 'BaseInfoFormTab',
                    label: this.$t('BaseInformation'),
                    active: true
                },
                profile: {
                    tab: 'ProfileFormTab',
                    label: this.$t('Profile'),
                    active: false
                },
            }
        },
        methods: {
            selectTab(tab) {
                this.currentTab = tab;
            },
            getSelectedClass(tab) {
                return tab === this.currentTab ? 'btn grass rounded' : '';
            },
            afterSave(response) {
                this.isNewRecord = response.data.isNewRecord;
                this.commonData.primaryKeys = response.data.primaryKeys;
            },
            afterFind(response) {
                this.isNewRecord = response.data.isNewRecord;
            }
        },
        mounted() {
        },
        created() {
            let queryParams = this.$route.query;
            let that = this;
            Object.keys(this.commonData.primaryKeys).forEach(function (key) {
                if (that.commonData.primaryKeys.hasOwnProperty(key)) {
                    that.commonData.primaryKeys[key] = queryParams[key];
                }
            });
            // Object.keys(this.commonData.profilePrimaryKeys).forEach(function (key) {
            //     if (that.commonData.profilePrimaryKeys.hasOwnProperty(key)) {
            //         that.commonData.profilePrimaryKeys[key] = queryParams[key];
            //     }
            // });
        }
    }
</script>
<style scoped>
    .heading .title {
        padding: .25rem;
    }

    .nav > a, .nav.right > a {
        height: 1.5rem;
        opacity: 1;
    }

    .tab-selected {
        text-decoration-line: underline;
    }

    .nav.right > a {
        margin-right: .25rem;
    }
</style>